<template>
  <div>
    <HomePageNav></HomePageNav>
    <div class="g-bg g-bd4 clearfix">
      <div class="g-mn4">
        <div class="g-mn4c">
          <div class="g-wrap6">
            <PlaylistInfo :playlist="info2"></PlaylistInfo>
            <SongList></SongList>
            <CommentsSectionBox></CommentsSectionBox>
          </div>
        </div>
      </div>
    </div>
    <Copyright></Copyright>
  </div>
</template>

<script>
import HomePageNav from "@/components/HomePageNav/HomePageNav.vue";
import PlaylistInfo from "@/pages/playList/PlaylistInfo.vue";
import SongList from "@/pages/playList/SongList.vue";
import { getPlaylistDetailFn, getCommentPlaylistFn } from "@/api/index.js";
import { shallowRef } from "@vue/reactivity";
import { provide } from "@vue/runtime-core";
import addAndPlaySongMixin from "@/baseFnMixin/playlist/addAndPlaySongMixin.js";
import addPlayListMixin from "@/baseFnMixin/playlist/addPlayListMixin.js";
import Copyright from "@/encapsulation/Copyright.vue";
import CommentsSectionBox from "@/encapsulation/comments/CommentsSectionBox.vue";
import { useRouter, useRoute } from "vue-router";
import { ref } from "vue";

export default {
  name: "PlayListPage",
  components: { HomePageNav, PlaylistInfo, SongList, Copyright, CommentsSectionBox },
  setup() {
    const info2 = shallowRef(null);
    const info1 = shallowRef(null);
    const tracks = shallowRef(null);
    const comment = shallowRef(null);
    const router = useRouter();
    const route = useRoute();
    let flag = ref(false);
    //  判断参数中是否有id属性
    if (!("id" in route.query)) {
      router.push({
        name: "err",
        params: {
          err: route.fullPath,
        },
      });
    }
    let info = {
      id: route.query.id,
      type: 2,
    };
    getPlaylistDetailFn(route.query.id)
      .then((response) => {
        info2.value = response.data.playlist;
        info1.value = {
          trackCount: info2.value.trackCount,
          playCount: info2.value.playCount,
          title: "歌曲列表",
        };
        tracks.value = response.data.playlist.tracks;

        flag.value = true;
      })
      .catch(() => {
        router.push({
          name: "err",
          params: {
            err: route.fullPath,
          },
        });
      });
    provide("comment", { comment, getComment, info });
    // 获取歌单评论
    function getComment(index) {
      getCommentPlaylistFn(route.query.id, index)
        .then((response) => {
          comment.value = response.data;
        })
        .catch((err) => {
          console.log(err);
        });
    }
    getComment();
    // 歌单信息
    provide("listHeadInfo", info1);
    //  歌单中歌曲信息
    provide("songlistInfo", tracks);
    //  播放歌曲并且添加到播放列表
    const Cplay = addAndPlaySongMixin();
    function play() {
      Cplay(info2.value.tracks);
    }
    provide("Cplay", play);
    //  歌曲添加到播放列表
    const Sadd = addPlayListMixin();
    function add() {
      Sadd(info2.value.tracks);
    }
    provide("add", add);
    provide("flag", flag);
    return {
      info2,
    };
  },
};
</script>

<style></style>
